---
import { Prism } from "@astrojs/prism";
---

<div class="w-full bg-gray-100">
  <section id="one" class="bg-gray-100 py-12 max-w-[90vw] mx-auto">
    <div class="container mx-auto">
      <div class="flex flex-col md:flex-row md:gap-6">
        <!-- Left column (1/3) -->
        <div class="w-full md:w-1/3 mb-6 md:mb-0 p-4 m-4">
          <header class="mb-4 text-gray-800">
            <h2 class="text-2xl font-semibold">Why Code2prompt ?</h2>
          </header>

          <p class="mb-2 m-4 text-gray-800">
            Code2Prompt introduces a new development workflow, enabling AI and
            human agents to interact with code efficiently.
          </p>

          <p class="mb-2 m-4 text-gray-800">
            Code2Prompt leverages glob patterns to include or exclude only the
            relevant files.
          </p>

          <p class="mb-2 m-4 text-gray-800">
            This allows you to query LLMs without extra noise, thus reducing
            hallucination and increasing performance.
          </p>
        </div>

        <!-- Right column (2/3) with background image -->
        <div class="w-full md:w-2/3 relative m-2 p-2">
          <!-- Code block container -->
          <div
            class="bg-gray-900 bg-opacity-80 rounded-md relative flex items-center justify-center h-full"
          >
            <!-- Copy button -->
            <button
              class="absolute top-2 right-2 bg-gray-700 hover:bg-gray-600 text-white text-sm px-2 py-1 rounded-md flex items-center z-10"
              onclick="copyCode(this)"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-4 w-4 mr-1"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
                ></path>
              </svg>
              Copy
            </button>

            <!-- Code block with appropriate word wrapping -->
            <Prism
              code={`code2prompt . --include "*.js,*.html" --exclude "node_modules/"`}
              lang="js"
              class="overflow-x-auto w-auto ml-10 mr-10"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- Marquee sections - keeping the custom classes -->
    <div class="scroller" data-speed="slow">
      <ul class="tag-list scroller__inner">
        <li>Code it</li>
        <li>Parse it</li>
        <li>Extract it</li>
        <li>Format it</li>
        <li>Analyze it</li>
        <li>Optimize it</li>
        <li>Rewrite it</li>
        <li>Summarize it</li>
        <li>Filter it</li>
        <li>Search it</li>
        <li>Sort it</li>
        <li>Query it</li>
        <li>Compare it</li>
        <li>Deploy it</li>
        <li>Debug it</li>
        <li>Refactor it</li>
        <li>Automate it</li>
        <li>Run it</li>
        <li>Monitor it</li>
        <li>Test it</li>
        <li>Track it</li>
        <li>Patch it</li>
        <li>Secure it</li>
        <li>Train it</li>
        <li>Validate it</li>
        <li>Package it</li>
        <li>Upgrade it</li>
        <li>Integrate it</li>
        <li>Unlock it</li>
      </ul>
    </div>
    <div class="scroller" data-direction="right" data-speed="fast">
      <div class="scroller__inner">
        <img class="img-scroll" src="/assets/images/Ollama.svg" alt="LLaMA" />
        <img class="img-scroll" src="/assets/images/Groq.svg" alt="Grok" />
        <img class="img-scroll" src="/assets/images/Qwen.svg" alt="Qwen" />
        <img
          class="img-scroll"
          src="/assets/images/Mistral.svg"
          alt="Mistral"
        />
        <img
          class="img-scroll"
          src="/assets/images/Deepseek.svg"
          alt="DeepSeek"
        />
        <img class="img-scroll" src="/assets/images/Gemini.svg" alt="Gemini" />
        <img class="img-scroll" src="/assets/images/OpenAI.svg" alt="GPT" />
        <img class="img-scroll" src="/assets/images/Claude.svg" alt="Claude" />
      </div>
    </div>
  </section>
</div>
